import React, {PureComponent} from 'react'
import Line from '../chart/base-line'
import {setTitle, scale} from '../../component/chart/util/common'
import echarts from 'echarts';
import {connect} from 'react-redux'
import {millToDate} from '../../util/util'

class CheckMonth extends PureComponent {
    shouldComponentUpdate(nextProps) {
        return nextProps.checkMonth !== this.props.checkMonth
    }

    renderDate = (data) => {
        const checkMonth = data.toJS()
        return {
            title: '检验合格率月度趋势统计图',
            xAxisData: checkMonth[Object.keys(checkMonth)[0]] && checkMonth[Object.keys(checkMonth)[0]].map(s => millToDate(s.dt)),
            option: {
                yAxis: {
                    min: 90,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                title: {
                    textStyle: {
                        color: '#5BE2EF',
                        fontSize: 14 * scale,
                        fontWeight: 'bolder'
                    }
                }
            },
            yAxisData: Object.keys(checkMonth).map(key => {
                return {
                    name: key,
                    data: checkMonth[key].map(s => s.value)
                }
            })
        }
    }

    render() {
        const {checkMonth} = this.props
        const data = this.renderDate(checkMonth)
        return (
            <Line config={data}/>
        )
    }

}


function mapStoreToProps({checkMonth}) {
    return {checkMonth}
}

export default connect(mapStoreToProps)(CheckMonth)